<template>
  
  <div class="min-h serveProject bg-wt">
    <!-- 展示搜索框页面 -->
    <SearchForm :searchData="pagination" @handleClear="handleClear" @handleReset="handleReset"
      @handleSearch="handleSearch"
      
    ></SearchForm>


    <!-- 展示列表页面 
    定义属性和方法
    -->
    <TableList
    :data="data"
    :total="total"
    :pagination="pagination"
    :dataLoading="dataLoading"
    @onPageChange="onPageChange"
     @handleBulid="handleBulid"
     @handleEdit="handleEdit"
    ></TableList>
    
     <!-- 新增或编辑弹窗 -->
    <DialogForm 
    ref="formRef"
    :title="title"
    :visible="visible"
    :data="formBaseData"
    @handleClose="handleClose"
    @handle-add="handleAdd"
    @handleEdit="handleEditForm"
    >
  </DialogForm>
  </div>
</template>
  
<script setup lang="jsx">
import { ref,onMounted } from 'vue';
//引入列表页组件
import TableList from './components/TableList.vue'
//引入搜索框组件
import SearchForm from './components/SearchForm.vue'
import DialogForm from './components/DialogForm.vue'
import { MessagePlugin } from 'tdesign-vue-next'
//添加接口
import { getProjectList,projectAdd ,getProjectDetails ,projectUpdate } from '@/api/serve'
// 修改数据
const handleEditForm = async (val) => {
  const res = await projectUpdate(val)
  if (res.code === 200) {
    MessagePlugin.success('编辑成功')
    getList()
    handleClose()
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(res.msg)
  }
}
const title = ref('') // 弹窗标题
const formBaseData = ref({}) // 弹窗表单内容

//编辑
const handleEdit = (val) =>{
  // 将弹窗的标题
  title.value = '编辑'
  // 获取详情
  getDetails(val.id)
  // 显示弹窗
  visible.value = true
}

// 获取详情数据
const getDetails = async (id) => {
  const res = await getProjectDetails(id) // 获取列表数据
  if (res.code === 200) {
    formBaseData.value = res.data
  }
}

const data = ref([]);
const total = ref(0);
const dataLoading = ref(false) // 加载中


const pagination = ref({
  pageSize: 10,
  pageNum: 1
})
//生命周期
onMounted(() => {
  getList()
})


//调用接口
const getList = async () => {
  const res = await getProjectList(pagination.value)
  data.value = res.data.records
  total.value = Number(res.data.total)
}


// 翻页设置当前页
const onPageChange = (val) => {
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  getList()
}


//判断当前参数是否包含小数点
const isDecimals = (val) => {
  if (String(val).indexOf('.') > -1) {
    return true;
  }
  return false;
}


//重置搜索框
const handleReset=()=>{
  //重置页码
  pagination.value={
    pageSize: 5,
    pageNum: 1
  }
  //重新查询列表
  getList();
}
//搜索按钮
const handleSearch=()=>{
  getList();
}
//清空按钮
const handleClear=(val)=>{
  if(val==='name'){
    delete pagination.value.name
  }else{
    delete pagination.value.status
  }
  getList();
}
//是否显示弹窗
var visible = ref(false)
//定义子组件对象
const formRef = ref(null)




//点击新增护理项目 按钮 把visible设置为true，弹出
const handleBulid = () =>{
    title.value="新增"
  visible.value = true;
}
//点击弹窗中的关闭或取消，关闭弹窗
const handleClose = () =>{
  visible.value = false;
}


//调用新增接口
const handleAdd =async(val)=>{
  //调用接口
  const res=await projectAdd(val)
  if(res.code === 200){
    MessagePlugin.success('添加成功')
    //查询列表
    getList()
    //关闭弹窗
    handleClose()
    //清理弹窗中的内容，方便下次使用
    formRef.value.handleClear()
  }else{
    MessagePlugin.error(res.msg)
  }
}
</script>